<template>
  <div>
    <el-form inline>
      <el-form-item label="请输入">
        <el-input
          v-model="query.carPlate"
          placeholder="车牌号/订单号/车主手机号"
        ></el-input>
      </el-form-item>

      <el-form-item label="订单来源">
        <el-select
          v-model="query.paymentWay"
          clearable
          placeholder="请选择"
          @change="initOrder"
        >
          <el-option value="修理厂">修理厂</el-option>
          <el-option value="天猫">天猫</el-option>
          <el-option value="天猫平台">天猫平台</el-option>
          <el-option value="淘宝">淘宝</el-option>
          <el-option value="微信小程序">微信小程序</el-option>
          <el-option value="中保车服">中保车服</el-option>
          <el-option value="北高峰">北高峰</el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择检测站">
        <el-autocomplete
          :debounce="300"
          class="inline-input"
          v-model="query.stationName"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>

      <el-form-item label="司机">
        <el-autocomplete
          :debounce="300"
          class="inline-input"
          v-model="query.driverName"
          :fetch-suggestions="searchOld"
          placeholder="请输入司机姓名"
          :trigger-on-focus="false"
          @select="oldDriver"
        ></el-autocomplete>
      </el-form-item>

      <el-form-item label="城市">
        <pickArea :showArea="false" @getSite="getCity"></pickArea>
      </el-form-item>

      <el-form-item label="订单状态">
        <el-select
          v-model="query.orderState"
          clearable
          placeholder="请选择订单状态"
          @change="initOrder"
        >
          <el-option value="订单完成">订单完成</el-option>
          <el-option value="待开始">待开始</el-option>
          <el-option value="正在进行">正在进行</el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="接单状态">
        <el-select
          v-model="query.orderState2"
          clearable
          placeholder="请选择"
          @change="initOrder"
        >
          <el-option value="接单完成">接单完成</el-option>
          <el-option value="正在接单">正在接单</el-option>
          <el-option value="接单失败">接单失败</el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="下单时间">
        <el-date-picker
          v-model="query.placeOrderTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" >
        </el-date-picker>
      </el-form-item>

       <el-form-item label="完成时间">
        <el-date-picker
          v-model="query.complateTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期" >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button @click="initOrder">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="orders"
      stripe
      @expand-change="orderD"
      row-key="id"
      :expand-row-keys="nowRow"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-steps direction="vertical" :active="serviceState">
            <el-step title="预约">
              <template #description>
                <div class="item-desc">
                  <span class="span1">车牌:</span>{{ Dtil.carPlate }}
                </div>
                <div class="item-desc">
                  <span class="span1">地址:</span
                  >{{
                    props.row.province +
                    props.row.city +
                    props.row.area +
                    props.row.address
                  }}
                </div>
                <div class="item-desc">
                  <span class="span1">预检时间:</span>{{ Dtil.placeTestTime }}
                </div>
                <div class="item-desc">
                  <span class="span1">订单号:</span>{{ Dtil.id }}
                </div>
              </template>
            </el-step>
            <el-step title="预检">
              <template #description>
                <div class="item-desc">
                  <span class="span1">客户姓名:</span>{{ Dtil.customerName }}
                </div>
                <div class="item-desc">
                  <span class="span1">客户电话:</span>{{ Dtil.customerPhone }}
                </div>
                <div class="item-desc">
                  <span class="span1">代检司机:</span>{{ Dtil.driverName }}
                </div>
                <div class="item-desc">
                  <span class="span1">实况照片:</span
                  ><el-image
                    :src="item"
                    v-for="(item, index) in Dtil.pickCarImg"
                    :key="index"
                    style="width: 160px; height: 160px; margin-right: 6px"
                    :preview-src-list="Dtil.pickCarImg"
                    fit="contain"
                  ></el-image>
                </div>
                <div class="item-desc">
                  <span class="span1">取车签字:</span
                  ><el-image
                    :src="Dtil.pickCarCustomerSign"
                    :preview-src-list="Dtil.pickCarCustomerSign"
                    fit="contain"
                    style="width=100px;height:100px;"
                  ></el-image
                  ><el-image
                    :src="Dtil.pickCarDriverSign"
                    style="width=100px;height:100px;"
                    :preview-src-list="Dtil.pickCarDriverSign"
                    fit="contain"
                  ></el-image>
                </div>
              </template>
            </el-step>
            <el-step title="送检">
              <template #description>
                <div class="item-desc">
                  <span class="span1">取车时间:</span>{{ Dtil.pickCarTime }}
                </div>
                <div class="item-desc">
                  <span class="span1">检测结果:</span>{{ Dtil.testResult }}
                </div>
              </template>
            </el-step>
            <el-step title="还车">
              <template #description>
                <div class="item-desc">
                  <span class="span1">还车时间:</span>{{ Dtil.pickCarTime }}
                </div>
                <div class="item-desc">
                  <span class="span1">还车签字:</span
                  ><el-image
                    :src="Dtil.backCarCustomerSign"
                    :preview-src-list="[Dtil.backCarCustomerSign]"
                    fit="contain"
                    style="width=100px;height:100px;"
                  ></el-image>
                  <el-image
                    :src="Dtil.backCarDriverSign"
                    :preview-src-list="[Dtil.backCarDriverSign]"
                    fit="contain"
                    style="width=100px;height:100px;"
                  ></el-image>
                </div>
              </template>
            </el-step>
            <el-step title="归档">
              <template #description>
                <div class="item-desc">
                  <span class="span1">评价反馈:</span>
                </div>
                <div class="item-desc">
                  <span class="span1">回执图:</span
                  ><el-image
                    :src="img"
                    v-for="(img, index) in Dtil.testReport"
                    :key="index"
                    style="width: 120px"
                    :preview-src-list="Dtil.testReport"
                    fit="contain"
                  ></el-image>
                </div>
              </template>
            </el-step>
          </el-steps>
        </template>
      </el-table-column>

      <el-table-column prop="carPlate" label="车牌" width="100">
      </el-table-column>
      <el-table-column prop="customerName" label="车主姓名" width="120">
      </el-table-column>
      <el-table-column prop="customerPhone" label="车主电话" width="130">
      </el-table-column>
      <el-table-column prop="name" label="提车地址" width="250">
        <template #default="scope">
          {{
            scope.row.province +
            scope.row.city +
            scope.row.area +
            scope.row.address
          }}
        </template>
      </el-table-column>
      <el-table-column prop="carType" label="车型"> </el-table-column>
      <el-table-column prop="driverName" label="待检司机"> </el-table-column>
      <el-table-column prop="stationName" label="监测站" width="100">
      </el-table-column>
      <el-table-column prop="paymentWay" label="订单来源" width="120">
      </el-table-column>
      <el-table-column prop="placeOrderTime" label="下单时间" width="110">
      </el-table-column>
      <el-table-column prop="orderMoney" label="订单金额" width="110">
      </el-table-column>
      <el-table-column
        prop="serviceState"
        label="联系状态"
        fixed="right"
        width="78"
      >
        <template #default="props">
          <el-tag
            v-if="props.row.serviceState == '归档'"
            type="info"
            effect="dark"
          >
             未联系 
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="orderState" label="订单状态" fixed="right">
        <template #default="props">
          <el-tag
            effect="dark"
            v-if="props.row.orderState == '订单完成'"
            type="success"
          >
            {{ props.row.orderState }}
          </el-tag>
          <el-tag
            effect="dark"
            v-else-if="props.row.orderState == '待开始'"
            type="danger"
          >
            {{ props.row.orderState }}
          </el-tag>
          <el-tag
            effect="dark"
            v-else-if="props.row.orderState == '正在进行'"
            type="warning"
          >
            {{ props.row.orderState }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button type="primary" size="small" @click="xiugaiOrder(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="small" @click="cancel(scope.row.id)"
            >取消</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.pageNum"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="query.total"
    >
    </el-pagination>

    <el-dialog
      title="订单信息"
      :visible.sync="dialogVisible"
      width="75%"
      center
    >
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label"> 订单id </template>
          {{ nowOrder.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 车牌 </template>
          <el-input v-model="nowOrder.carPlate"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 车型 </template>
          {{ nowOrder.carType }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 客户姓名 </template>
          <el-input v-model="nowOrder.customerName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 客户电话 </template>
          <el-input v-model="nowOrder.customerPhone"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 下单时间 </template>
          {{ nowOrder.placeOrderTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 用户检测费 </template>
          <el-input v-model="nowOrder.payTestFee"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 服务费 </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 司机服务费 </template>
          <el-input v-model="nowOrder.orderMoney"></el-input>
        </el-descriptions-item>
         <el-descriptions-item>
          <template slot="label"> 拖车费 </template>
          <el-input>{{ nowOrder.payDriverFee }}</el-input>       
        </el-descriptions-item>
          <el-descriptions-item>
          <template slot="label"> 公里数 </template>
          <el-input></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 待检司机 </template>
          <el-input>{{ nowOrder.driverName}}</el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 支付方式 </template>
          {{ nowOrder.paymentWay }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 支付状态 </template>
          {{ nowOrder.paymentState }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 预检时间 </template>
          <el-date-picker
            v-model="nowOrder.placeTestTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 提车地址 </template>
          {{
            nowOrder.province + nowOrder.city + nowOrder.area + nowOrder.address
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 行驶证 </template>
          <el-image
            v-for="(item, index) in nowOrder.merchantLicenseImg"
            :key="index"
            style="width: 100px; height: 100px"
            :src="item"
            fit="contain"
            :preview-src-list="[nowOrder.merchantLicenseImg]"
          ></el-image>
        </el-descriptions-item>
         <el-descriptions-item>
          <template slot="label"> 客服 </template>
          {{ nowOrder.staff }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitOrder">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pickArea from "../pickArea.vue";
export default {
  components: {
    pickArea,
  },
  inject: ["reload"],
  mounted: function () {
    this.initOrder();
  },
  data() {
    return {
      orders: [],
      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        carPlate: "",
        paymentWay: "",
        stationName: "",
        stationId: "",
        province: "",
        city: "",
        driverName: "",
        driverId: "",
        orderState: "",
        serviceState: "",
        placeOrderTime: "",
      },
      dialogVisible: false,
      nowOrder: {},
      Dtil: {},
      nowRow: [],
      serviceState:'',
    };
  },
  methods: {
    handleCurrentChange: function (pageNum) {
      this.query.pageNum = pageNum;
      this.initOrder();
    },
    initOrder: async function (pageNum = 1) {
      let res = await this.$http.post("/order/getDriverOrder", {
        pageNum: this.query.pageNum,
        pageSize: this.query.pageSize,
        carPlate: this.query.carPlate,
        paymentWay: this.query.paymentWay,
        stationId: this.query.stationId,
        province: this.query.province,
        city: this.query.city,
        driverName: this.query.driverName,
        driverId: this.query.driverId,
        orderState: this.query.orderState,
        serviceState: this.query.serviceState,
        placeOrderTime: [this.query.placeOrderTime],
      });
      console.log(res);
      this.orders = res.data.object.list;
      this.query.total = res.data.object.total;
    },
    handleSizeChange: function (pageSize) {
      this.query.pageSize = pageSize;
    },
    xiugaiOrder: function (order) {
      this.dialogVisible = true;
      order.merchantLicenseImg = JSON.parse(order.merchantLicenseImg);
      this.nowOrder = order;
    },
    submitOrder: function () {
      let order = JSON.parse(JSON.stringify(this.nowOrder));
      order.merchantLicenseImg = JSON.stringify(order.merchantLicenseImg);
      this.$http.post("/order/updateDriverOrder", order).then((res) => {
        if (res.data.code) {
          this.$message.success("修改成功");
          this.reload();
        }
      });
      this.dialogVisible = false;
    },
    cancel: function (orderId) {
      this.$http
        .delete("/order/deleteDriverOrder?id=" + orderId)
        .then((res) => {
          // console.log(res);
          if (res.data.code) {
            this.$message.success("删除成功");
            this.reload();
          }
        });
    },
    handleSelect: function (item) {
      this.query.stationId = item.id;
      this.initOrder();
    },
    querySearch: function (stationName, cb) {
      let suggestions = [];
      this.$http
        .get("/testStation/getAllStation", { params: { stationName } })
        .then((res) => {
          res.data.object.list.forEach((item) => {
            suggestions.push({ value: item.name, id: item.id });
          });
        });
      cb(suggestions);
    },
    getCity: function (province, city) {
      this.query.province = province;
      this.query.city = city;
    },
    oldDriver: function (item) {
      this.query.driverId = item.driverId;
      this.initOrder();
    },
    searchOld: function (driverName) {
      let nameandId = [];
      this.$http
        .get("/driverUser/getAllDriver", {
          params: { driverName, pageNum: 1, pageSize: 10 },
        })
        .then((res) => {
          console.log(res);
          res.data.object.list.forEach((item) => {
            nameandId.push({
              driverId: item.id,
              value: item.driverName,
            });
          });
        });
      cb(nameandId);
    },
    orderD: function (row, expandedRows) {
      if (expandedRows.length) {
        console.log(row, expandedRows);
        this.nowRow = [row.id];
        this.$http.get("/order/getOrderDetail?id=" + row.id).then((res) => {
          switch(this.Dtil.serviceState){
            case '归档:':
              this.serviceState = 5;
              break;
            case '还车:':
              this.serviceState = 4;
              break;
            case '送检:':
              this.serviceState = 3;
              break;
            case '预检:':
              this.serviceState = 2;
              break;
            case '预约:':
              this.serviceState = 1;
              break;
            default:
              this.serviceState = 1;
              break;
          }
          this.Dtil = res.data.object;
          this.Dtil.pickCarImg = JSON.parse(res.data.object.pickCarImg);
          this.Dtil.testReport = JSON.parse(res.data.object.testReport);
        });
      }
    },
  },
};
</script>

<style>
.item-desc {
  margin: 0 10px 30px 0;
  font-size: 15px;
}
.span1 {
  color: grey;
  margin-right: 10px;
}
</style>